<template>
	<div class="common-layout">
		<el-container>
		  <el-header>
			  
			  <el-row>
				 <el-col :span="22">
					 <h1>饿了么后台管理系统</h1>
				 </el-col>
				 <el-col :span="2">
					 <el-button link type="primary" style="margin-top: 50px;" @click="handlelogOut">退出登录</el-button>
				 </el-col>
			  </el-row>
		  </el-header>
		  <el-container>
			<el-aside>
				
				 <el-menu 
					 :default-active="activeRoute" 
					 class="el-menu-vertical-demo"
					 router="true"
					 @select="menuSelect">
					 <el-menu-item index="/main/business">
						 <el-icon><icon-menu /></el-icon>
						 <span>商家管理</span>
					 </el-menu-item>
					 <el-menu-item index="/main/food">
						 <el-icon><Dish /></el-icon>
						 <span>餐品管理</span>
					 </el-menu-item>
					 <el-menu-item index="/main/user">
						 <el-icon><User /></el-icon>
						 <span>用户管理</span>
					 </el-menu-item>
					 <el-menu-item index="/main/address">
						 <el-icon><Location /></el-icon>
						 <span>地址管理</span>
					 </el-menu-item>
					 <el-menu-item index="/main/cart">
						 <el-icon><ShoppingCart /></el-icon>
						 <span>购物车管理</span>
					 </el-menu-item>
					 <el-menu-item index="/main/order">
						 <el-icon><List /></el-icon>
						 <span>订单管理</span>
					 </el-menu-item>
				 </el-menu>
				
			</el-aside>
			<el-main>
				<!-- 二级路由 -->
				<router-view/>
			</el-main>
		  </el-container>
		</el-container>
	  </div>
 </template>
 
 <script setup>
	 import {onMounted, ref, getCurrentInstance, computed} from 'vue';
	 import store from '@/store';
	 import {
	   Menu as IconMenu,
	   Location,
	   User,
	   Dish,
	   ShoppingCart,
	   List
	 } from '@element-plus/icons-vue'
	 
	 let {proxy} = getCurrentInstance();
	 
	 //计算属性
	 let activeRoute = computed(()=>{
		 return store.state.elMenuActive;
	 });
	 
	 //监听菜单栏项的选中
	 const menuSelect = (selectPath)=>{
		 console.log('menuSelect---',selectPath);
		 //将选中项的路径赋值给store中的变量
		 store.state.elMenuActive = selectPath;
	 }
 
	 //---------处理退出登录--------------
	 const handlelogOut = ()=>{
		 //移除浏览器本地存储中登录用户的信息
		 window.localStorage.removeItem("adminUser");
		 //发送退出登录的请求去服务端删除session中的登录状态
		 proxy.$axios({
			 method: 'get',
			 url: '/log/out'
		 }).then(res=>{
			 let resultBean = res.data;
			 if(resultBean.code == 200){
				 proxy.$router.push("/login");
			 }else{
				 ElMessage.error(resultBean.msg);
			 }
		 })
	 }
	 
 </script>
 
 <style scoped>
	 
	 .common-layout{
		 width: 100%;
		 height: 800px;
	 }
	 
	 .el-header{
		 height: 80px;
		 line-height: 80px;
		 background-color: azure;
	 }
	 
	 .el-aside{
		 width: 20%;
		 height: 720px;
	 }
	 
	 .el-main{
	 }
	 
 </style>